<template>
	<div>
		<div class="container"
			:style='{ "minHeight": "100vh", "alignItems": "center", "background": "url(http://codegen.caihongy.cn/20230922/735087380ee74ae5b7d67094b120ecee.jpg)", "display": "flex", "width": "100%", "backgroundSize": "cover", "backgroundPosition": "center center", "backgroundRepeat": "no-repeat", "justifyContent": "center" }'>
			<div>
				<div
					:style='{ "margin": "20px 0", "color": "#fff", "textAlign": "center", "width": "100%", "letterSpacing": "2px", "fontSize": "32px" }'>
					{{ pageFlag == 'register' ? '用户注册' : '忘记密码' }}
				</div>
				<el-form class='rgs-form' ref="registerForm" :model="registerForm" :rules="rules" label-width="auto">
					<template v-if="pageFlag == 'register'">
						<el-form-item label="用户账号：" prop="yonghuzhanghao">
							<el-input v-model="registerForm.yonghuzhanghao" placeholder="请输入用户账号" />
						</el-form-item>
						<el-form-item label="密码：" prop="mima">
							<el-input v-model="registerForm.mima" type="password" placeholder="请输入密码" />
						</el-form-item>
						<el-form-item label="确认密码：" prop="mima2">
							<el-input v-model="registerForm.mima2" type="password" placeholder="请再次输入密码" />
						</el-form-item>
						<el-form-item label="头像：" prop="touxiang">
							<file-upload tip="点击上传头像" action="file/upload" :limit="1" :multiple="true"
								:fileUrls="registerForm.touxiang ? registerForm.touxiang : ''"
								@change="yonghutouxiangUploadChange"></file-upload>
						</el-form-item>
						<el-form-item label="用户姓名：" prop="yonghuxingming">
							<el-input v-model="registerForm.yonghuxingming" placeholder="请输入用户姓名" />
						</el-form-item>
						<el-form-item label="性别：" prop="xingbie">
							<el-select v-model="registerForm.xingbie" placeholder="请选择性别">
								<el-option v-for="(item, index) in yonghuxingbieOptions" :key="index" :label="item"
									:value="item">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="手机号码：" prop="shoujihaoma">
							<el-input v-model="registerForm.shoujihaoma" placeholder="请输入手机号码" />
						</el-form-item>
					</template>
					<template v-else>
						<el-form-item prop="phone" label="手机号码：">
							<el-input v-model="registerForm.phone" placeholder="请输入手机" />
						</el-form-item>
						<el-form-item label="新密码：" prop="password">
							<el-input v-model="registerForm.password" type="password" placeholder="请输入新密码" />
						</el-form-item>
						<el-form-item label="确认密码：" prop="newPassword">
							<el-input v-model="registerForm.newPassword" type="password" placeholder="请再次输入密码" />
						</el-form-item>
					</template>
					<el-button
						:style='{ "border": "0", "cursor": "pointer", "padding": "0 10px", "margin": "20px auto 5px", "outline": "none", "color": "#fff", "borderRadius": "4px", "background": "#1abc9e", "display": "block", "width": "80%", "fontSize": "16px", "height": "44px" }'
						type="primary" @click="submitForm('registerForm')">{{ pageFlag == 'register' ? '用户注册' : '修改密码'
						}}</el-button>
					<el-button
						:style='{ "border": "0", "cursor": "pointer", "padding": "0 10px", "margin": "0px auto 0px", "color": "#666", "textAlign": "right", "display": "block", "outline": "none", "borderRadius": "8px", "background": "none", "width": "80%", "fontSize": "16px", "height": "44px" }'
						@click="resetForm('registerForm')">重置</el-button>
					<router-link
						:style='{ "cursor": "pointer", "padding": "0 10%", "margin": "0 0 40px", "color": "rgba(159, 159, 159, 1)", "display": "inline-block", "lineHeight": "1", "fontSize": "14px", "textDecoration": "none" }'
						to="/login">已有账户登录</router-link>
					<div class="idea1"
						:style='{ "width": "100%", "background": "red", "display": "none", "height": "40px" }'></div>
					<div class="idea2"
						:style='{ "width": "100%", "background": "blue", "display": "none", "height": "40px" }'></div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>

export default {
	//数据集合
	data() {
		return {
			pageFlag: '',
			tableName: '',
			registerForm: {},
			forgetForm: {},
			rules: {},
			requiredRules: {},
			yonghuxingbieOptions: [],
			zhuanjiaxingbieOptions: [],
		}
	},
	mounted() {
		if (this.$route.query.pageFlag == 'register') {
			this.tableName = this.$route.query.role;
				this.registerForm = {
					yonghuzhanghao: '',
					mima: '',
					mima2: '',
					touxiang: '',
					yonghuxingming: '',
					xingbie: '',
					phone: '',
					money: '',
				}
				this.requiredRules.yonghuzhanghao = [{ required: true, message: '请输入用户账号', trigger: 'blur' }]
				this.requiredRules.mima = [{ required: true, message: '请输入密码', trigger: 'blur' }]
				this.requiredRules.yonghuxingming = [{ required: true, message: '请输入用户姓名', trigger: 'blur' }]
		}
	},
	created() {
		this.pageFlag = this.$route.query.pageFlag;
		if (this.$route.query.pageFlag == 'register') {
			this.rules.yonghuzhanghao = [{ required: true, message: '请输入用户账号', trigger: 'blur' }];
			this.rules.mima = [{ required: true, message: '请输入密码', trigger: 'blur' }];
			this.rules.yonghuxingming = [{ required: true, message: '请输入用户姓名', trigger: 'blur' }];
			this.yonghuxingbieOptions = "男,女".split(',');
			this.rules.shoujihaoma = [{ required: true, validator: this.$validate.isMobile, trigger: 'blur' }];
			this.rules.money = [{ required: true, validator: this.$validate.isNumber, trigger: 'blur' }];
			// }
		} else {
			this.rules.phone = [{ required: true, validator: this.$validate.isMobile, trigger: 'blur' }];
			this.rules.password = [{ required: true, message: '请输入密码', trigger: 'blur' }];
		}
	},
	//方法集合
	methods: {
		changeRules(name) {
			if (this.requiredRules[name]) {
				return true
			}
			return false
		},
		// 获取uuid
		getUUID() {
			return new Date().getTime();
		},
		// 下二随
		yonghutouxiangUploadChange(fileUrls) {
			this.registerForm.touxiang = fileUrls.replace(new RegExp(this.$config.baseUrl, "g"), "");
		},

		// 多级联动参数


		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					if (this.pageFlag == 'register') {
						this.registerMth()
					} else {
						this.retrieve()
					}
				} else {
					return false;
				}
			});
		},
		registerMth() {
			if ((!this.registerForm.yonghuzhanghao)) {
				this.$message.error(`用户账号不能为空`);
				return
			}
			if (`yonghu` == this.tableName && this.registerForm.mima != this.registerForm.mima2) {
				this.$message.error(`两次密码输入不一致`);
				return
			}
			if ((!this.registerForm.mima)) {
				this.$message.error(`密码不能为空`);
				return
			}
			if ((!this.registerForm.yonghuxingming)) {
				this.$message.error(`用户姓名不能为空`);
				return
			}
			if (`yonghu` == this.tableName && this.registerForm.shoujihaoma && (!this.$validate.isMobile2(this.registerForm.shoujihaoma))) {
				this.$message.error(`手机号码应输入手机格式`);
				return
			}
			this.$http.post('yonghu/register', this.registerForm).then(res => {
				if (res.data.code === 0) {
					this.$message({
						message: '注册成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.$router.push('/login');
						}
					});
				} else {
					this.$message.error(res.data.msg);
				}
			});
		},
		retrieve() {
			if (this.registerForm.password != this.registerForm.newPassword) {
				this.$message.error(`两次密码输入不一致`);
				return
			}
			if ((!this.registerForm.password)) {
				this.$message.error(`密码不能为空`);
				return
			}
			if (this.registerForm.shouji && (!this.$validate.isMobile2(this.registerForm.shouji))) {
				this.$message.error(`手机应输入手机格式`);
				return
			}
			this.$http.put('yonghu/password', this.registerForm).then(res => {
				if (res.data.code === 0) {
					this.$message({
						message: '设置成功',
						type: 'success',
						duration: 1500,
						onClose: () => {
							this.$router.push('/login');
						}
					});
				} else {
					this.$message.error(res.data.msg);
				}
			});

		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
	position: relative;
	background: url(http://codegen.caihongy.cn/20230922/735087380ee74ae5b7d67094b120ecee.jpg);

	.rgs-form {
		background-color: #fff;
		padding: 40px;
		border-radius: 12px;
		width: 500px;
	}
}

.required::after {
	color: red;
	left: 120px;
	position: absolute;
	content: "*";
	order: 2;
}
</style>
